<template>

  <div class="d-flex justify-content-end flex-column align-items-center">


    <el-card v-for="item in boreInfoList" :key="item" class="m-2" shadow="hover" :body-style="cardBodyStyle">
      <div class="d-flex  justify-content-between " style="width:350px">
        <span>{{ item.code }}</span>
        <el-tag :type="item.status==='未开始'?'info':item.status==='进行中'?'':item.status==='已完成'?'success':'danger'" >{{ item.status }}</el-tag>
      </div>
      <div class="mt-3 d-flex  justify-content-between " style="width:350px">
        <span class="fw-lighter fs-7"> <i class="bi bi-geo-alt-fill text-black-50 "></i> {{
          item.coordinateDesignX + " " +
            item.coordinateDesignY
        }}</span>


        <div>
          <el-button @click="located(item)" type="primary" text size="small">定位</el-button>
          <el-button @click="detail(item)" type="success" size="small"  text>详情</el-button>
        </div>

      </div>
    </el-card>
  </div>
</template>
    
<script setup lang='ts'>


export interface BoreInfoListItem {
  id?: string
  code?: string
  type?: string
  coordinateDesignX?: number
  coordinateDesignY?: number
  epsg?: string
  landType?: string
  status?: string
}


const handleCheckedChange = (value: string[]) => {
  //   const checkedCount = value.length
  //   checkAll.value = checkedCount === cities.length
  //   isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}


const props = defineProps({
  boreInfoList: {
    type: Array<BoreInfoListItem>,
    default: () => { }
  },

})

const emits = defineEmits(["locatedClick","detailClick"])

/**
 * 将卡片上的详情和定位按钮传递出去
 */
const located = (item:any) => {
    emits("locatedClick",item);
}
const detail = (item:any) => {
    emits("detailClick",item);
}

const cardBodyStyle = ref({
  height: "70px"
})

</script>
    
<style>

</style>